import { ref, nextTick, computed } from 'vue';
export function useCropper(cropperRef) {
  const options = ref({
    outputType: 'webp',
    autoCrop: true,
    fixed: true,
    fixedNumber: [9, 16],
    infoTrue: true,
    full: true,
    maxImgSize: 3000,
    fillColor: '#000',
  });
  const functionList = ref([
    {
      id: 1,
      text: '自由裁剪',
      icon: 'icon-expend',
    },
    {
      id: 2,
      text: '1 / 1',
      icon: '',
    },
    {
      id: 3,
      text: '9 / 16',
      icon: '',
    },
    {
      id: 4,
      text: '16 / 9',
      icon: '',
    },
    {
      id: 5,
      text: '9 / 20',
      icon: '',
    },
    {
      id: 6,
      text: '向右旋转',
      icon: 'icon-rotate-right',
    },
    {
      id: 7,
      text: '放大',
      icon: 'icon-zoomin',
    },
    {
      id: 8,
      text: '缩小',
      icon: 'icon-zoomout',
    },
  ]);

  const handleFunction = (item) => {
    switch (item.id) {
      case 1:
        options.value.fixed = false;
        break;
      case 2:
      case 3:
      case 4:
      case 5:
        options.value.fixed = true;
        options.value.fixedNumber = [
          item.text.split('/')[0],
          item.text.split('/')[1],
        ];
        break;
      case 6:
        cropperRef.value.rotateRight();
        break;
      case 7:
      case 8:
        cropperRef.value.changeScale(item.id === 7 ? 1 : -1);
        break;
    }
    nextTick(() => {
      cropperRef.value.goAutoCrop();
    });
  };
  return {
    options,
    functionList,
    handleFunction
  };
}
